<template>
  <!-- 1.3.1 全站总览 -->
  <div class="overview betweenbox">
    <div class="overview-center colbetweenbox">
      <div class="map centermap">
        <!-- map -->
        <centerMap />
      </div>
      <div class="menu borderStyle centerbox">
        <!-- 7个菜单 -->
        <div v-for="(item,index) in menulist" :key="index" class="centerbox">
          <div class="item" @click="handleMenuClick(item,index)" :class="{active:item.active}">
            <div class="centerbox">
              <i :class="item.iconfont" class="iconfont item-iconfont"></i>
            </div>
            <div class="item-name centerbox">{{item.name}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="overview-right colbetweenbox">
      <div class="borderStyle">
        <!-- 环境信息 -->
        <environmentalInfo />
      </div>
      <!-- <div class=" borderStyle"> -->
      <!-- 物联感知设备 -->
      <!-- <alSensingEquipment /> -->
      <!-- </div> -->
      <div class="borderStyle">
        <!-- 设备预警 -->
        <equipmentWarn />
      </div>
      <div class="borderStyle">
        <!-- 智能联动 -->
        <intelligentLinkage />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { AuxiliaryMonitorModule } from "@/store/modules/AuxiliaryMonitor";
import { publicAPIModule } from "@/store/modules/public";
import environmentalInfo from "./environmentalInfo.vue";
import alSensingEquipment from "./alSensingEquipment.vue";
import equipmentWarn from "./equipmentWarn.vue";
import intelligentLinkage from "./intelligentLinkage.vue";
import { menuListType } from "@/utils/interface";
import centerMap from "./centerMap.vue";
interface dataType {
  label: string;
  children: object | string;
}

@Component({
  components: {
    environmentalInfo,
    alSensingEquipment,
    equipmentWarn,
    intelligentLinkage,
    centerMap,
  },
})
export default class Overview extends Vue {
  // 左侧树图总的data
  public data: dataType[] = [
    {
      label: "一级 1",
      children: [
        {
          label: "二级 1-1",
          children: [
            {
              label: "三级 1-1-1",
            },
          ],
        },
      ],
    },
    {
      label: "一级 2",
      children: [
        {
          label: "二级 2-1",
          children: [
            {
              label: "三级 2-1-1",
            },
          ],
        },
        {
          label: "二级 2-2",
          children: [
            {
              label: "三级 2-2-1",
            },
          ],
        },
      ],
    },
    {
      label: "一级 3",
      children: [
        {
          label: "二级 3-1",
          children: [
            {
              label: "三级 3-1-1",
            },
          ],
        },
        {
          label: "二级 3-2",
          children: [
            {
              label: "三级 3-2-1",
            },
          ],
        },
      ],
    },
  ];
  // 左侧树图当前data
  public defaultProps: dataType = {
    label: "label",
    children: "children",
  };
  // 下方菜单data
  public menulist: menuListType[] = [
    {
      name: "消防系统",
      iconfont: "iconxiaofang",
      active: false,
      path: "firefight",
    },
    // {
    //   name: "给排水系统",
    //   iconfont: "icongeipaishui",
    //   active: false,
    //   path: "drainage",
    // },
    {
      name: "照明控制",
      iconfont: "iconfloodLighting-o",
      active: false,
      path: "light",
    },
    {
      name: "安全防范",
      iconfont: "iconanfang",
      active: false,
      path: "security",
    },
    {
      name: "环境监控",
      iconfont: "iconicon-wenshidu",
      active: false,
      path: "ecocrisis",
    },
    {
      name: "阀值设置",
      iconfont: "iconfazhishezhi_huaban1",
      active: false,
      path: "thresholdvalue",
    },
    {
      name: "联动管理",
      iconfont: "iconliandongguanli_huaban1",
      active: false,
      path: "linkage",
    },
  ];

  get SubstationList() {
    return publicAPIModule.queryHasDataStationsList[0];
  }
  // 左侧树图节点-点击进入二级页面
  handleNodeClick(data: any) {
    // console.log(data);
    var path = "";
    this.$router.push("");
  }
  // 下方菜单-点击进入二级页面
  handleMenuClick(item: menuListType, index: number) {
    this.menulist.map((k) => (k.active = false));
    item.active = true;
    var pathValue = 0;
    if (item.path === "thresholdvalue") {
      pathValue = 2;
    } else if (item.path === "linkage") {
      pathValue = 4;
    } else {
      pathValue = 3;
    }
    AuxiliaryMonitorModule.setActiveRouter(pathValue);
    let list = {
      code: "1500000001",
      name: "220kV天平变电站",
    };
    this.$router.push({ path: item.path, query: list });
  }
}
</script>

<style lang="scss" scoped>
.overview {
  width: 100%;
  height: 100%;
  &-center {
    width: 10.99rem;
    height: 100%;
    margin: 0 0.2rem;
    .map {
      width: 100%;
      height: calc(70% - 0.1rem);
    }
    .menu {
      width: 100%;
      height: calc(30% - 0.1rem);
      > div {
        width: 1.75rem;
        height: 1.75rem;
        .item {
          width: 1.25rem;
          height: 1.25rem;
          background: url("../../../../assets/img/AuxiliaryMonitor/five-normal.png")
            no-repeat center center;
          background-size: 100% 100%;
          margin: 0 0.1rem;
          cursor: pointer;
          position: relative;
          .item-iconfont {
            display: inline-block;
            font-size: 0.58rem;
            color: RGBA(49, 153, 247, 1);
            position: absolute;
            top: -0.3rem;
          }
          .item-name {
            width: 100%;
            font-size: 0.12rem;
            position: absolute;
            bottom: 0.3rem;
            text-align: center;
          }
        }
        .item:hover {
          width: 1.75rem;
          height: 1.75rem;
          transition: all 0.2s;
          .item-iconfont {
            font-size: 0.8rem;
            color: RGBA(1, 245, 255, 1);
            transition: all 0.2s;
          }
          .item-name {
            font-size: 0.16rem;
            transition: all 0.2s;
          }
        }
        .active {
          width: 1.75rem;
          height: 1.75rem;
          transition: all 0.2s;
          .item-iconfont {
            font-size: 0.56rem;
            color: RGBA(1, 245, 255, 1);
            transition: all 0.2s;
          }
          .item-name {
            font-size: 0.16rem;
            transition: all 0.2s;
          }
        }
      }
    }
  }
  &-right {
    width: 4.45rem;
    height: 100%;
    > div {
      width: 100%;
      height: 32%;
    }
  }
}
</style>